<template>
  <div class="index-container">
    <!-- 第一个板块：Hero Section -->
    <section class="hero-section">
      <!-- 添加背景装饰元素 -->
      <div class="hero-background">
        <div class="grid-pattern"></div>
        <div class="gradient-overlay"></div>
      </div>
      
      <div class="hero-content">
        <div class="hero-text">
          <h1 class="hero-title">膳养智选</h1>
          <p class="hero-description">个性化的食物推荐</p>
          <p class="hero-subtitle">
            基于您的体检报告和健康状况，智能分析并推荐适合您的饮食方案，让每一餐都成为健康的选择。
          </p>
        </div>

        <!-- 体验卡片区域 -->
        <div class="experience-cards-container">
          <div class="experience-cards-grid">
            <div class="experience-card" @click="$router.push('/category')">
              <div class="card-icon">
                <el-icon><Food /></el-icon>
              </div>
              <h3>食品大全</h3>
              <p>探索丰富的食品数据库，了解每种食物的营养价值</p>
              <div class="card-decoration"></div>
            </div>
            <div class="experience-card" @click="$router.push('/user/health')">
              <div class="card-icon">
                <el-icon><User /></el-icon>
              </div>
              <h3>用户健康</h3>
              <p>查看您的健康档案，追踪健康状况变化</p>
              <div class="card-decoration"></div>
            </div>
            <div class="experience-card" @click="handleFamilyClick">
              <div class="card-icon">
                <el-icon><Share /></el-icon>
              </div>
              <h3>家庭共享</h3>
              <p>与家人共享健康数据，共同关注身体健康</p>
              <div class="card-decoration"></div>
            </div>
            <div class="experience-card" @click="$router.push('/medicalReport')">
              <div class="card-icon">
                <el-icon><Document /></el-icon>
              </div>
              <h3>体检报告</h3>
              <p>上传您的体检报告，获取专业的健康分析</p>
              <div class="card-decoration"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 第二个板块：Why Choose Us -->
    <section class="features-section">
      <h2 class="section-title">为什么选择膳养智选？</h2>
      <div class="features-grid">
        <div class="feature-card">
          <el-icon class="feature-icon"><Compass /></el-icon>
          <h3>个性化推荐</h3>
          <p>根据您的体检数据和健康状况，智能匹配最适合的食物，打造专属饮食方案。</p>
        </div>
        <div class="feature-card">
          <el-icon class="feature-icon"><DataAnalysis /></el-icon>
          <h3>深度健康分析</h3>
          <p>专业的健康指标解读，全面评估身体状况，为您的健康保驾护航。</p>
        </div>
        <div class="feature-card">
          <el-icon class="feature-icon"><Monitor /></el-icon>
          <h3>智能健康管理</h3>
          <p>实时跟踪健康状况变化，提供科学的饮食建议，助您轻松管理健康。</p>
        </div>
        <div class="feature-card">
          <el-icon class="feature-icon"><MagicStick /></el-icon>
          <h3>良好用户体验</h3>
          <p>简洁直观的界面设计，便捷的操作流程，让健康管理变得轻松愉悦。</p>
        </div>
      </div>
    </section>

    <!-- 添加家庭共享板块 -->
    <section class="family-sharing-section">
      <div class="family-sharing-content">
        <h2 class="section-title">家庭共享</h2>
        <p class="sharing-description">与最多五人组建家庭，时时刻刻关注身体健康</p>
        
        <div class="avatar-group">
          <!-- 已加入的成员头像 -->
          <div class="avatar-item" v-if="userStore.userInfo">
            <div class="avatar-wrapper active">
              <el-avatar :size="80" :src="userStore.avatarUrl || '@/assets/default-avatar.png'" />
              <div class="avatar-status">
                <el-icon><Check /></el-icon>
              </div>
            </div>
            <span class="avatar-name">我</span>
          </div>
          <!-- 空位头像 -->
          <div class="avatar-item" v-for="n in 4" :key="n">
            <div class="avatar-wrapper empty">
              <div class="empty-avatar">
                <el-icon><Plus /></el-icon>
              </div>
              <div class="avatar-connect-line"></div>
            </div>
            <span class="avatar-name">待加入</span>
          </div>
        </div>

        <div class="sharing-action">
          <el-button 
            type="primary" 
            size="large" 
            class="start-sharing-button"
            @click="handleFamilyClick"
          >
            <template v-if="!userStore.userInfo">
              前往登录
              <el-icon class="el-icon--right">
                <ArrowRight />
              </el-icon>
            </template>
            <template v-else-if="userStore.userInfo.familyRole">
              {{ userStore.userInfo.familyRole.id === 1 ? '管理家庭' : '查看家庭' }}
              <el-icon class="el-icon--right">
                <ArrowRight />
              </el-icon>
            </template>
            <template v-else>
              开启家庭共享
              <el-icon class="el-icon--right">
                <ArrowRight />
              </el-icon>
            </template>
          </el-button>
        </div>
      </div>
    </section>

    <!-- 添加家庭共享对话框 -->
    <el-dialog
      v-model="showFamilyDialog"
      title="家庭共享"
      width="460px"
      class="family-dialog"
      :show-close="true"
      :close-on-click-modal="false"
    >
      <div class="family-dialog-content">
        <div class="dialog-header">
          <img src="@/assets/wsylogo.svg" alt="Logo" class="dialog-logo">
          <h3 class="dialog-title">开启家庭共享</h3>
          <p class="dialog-subtitle">与最多五人组建家庭，时时刻刻关注身体健康</p>
        </div>

        <div class="dialog-features">
          <div class="dialog-feature-item">
            <el-icon class="dialog-feature-icon"><Share /></el-icon>
            <div class="dialog-feature-info">
              <h4>共享健康数据</h4>
              <p>实时查看家人的健康状况，及时了解身体变化</p>
            </div>
          </div>
          <div class="dialog-feature-item">
            <el-icon class="dialog-feature-icon"><Food /></el-icon>
            <div class="dialog-feature-info">
              <h4>查看饮食推荐</h4>
              <p>获取家人的个性化饮食建议，共同培养健康饮食习惯</p>
            </div>
          </div>
          <div class="dialog-feature-item">
            <el-icon class="dialog-feature-icon"><Lock /></el-icon>
            <div class="dialog-feature-info">
              <h4>设置家长控制</h4>
              <p>为未成年家庭成员设置饮食指导，呵护健康成长</p>
            </div>
          </div>
        </div>

        <div class="dialog-footer">
          <p class="dialog-note">注：创建或加入家庭后即可使用以上功能</p>
          <div class="dialog-actions">
            <el-button @click="showFamilyDialog = false" class="cancel-button">取消</el-button>
            <el-button 
              type="primary" 
              @click="handleCreateFamily" 
              class="continue-button"
            >
              继续
              <el-icon class="el-icon--right">
                <ArrowRight />
              </el-icon>
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 添加创建成功对话框 -->
    <el-dialog
      v-model="showSuccessDialog"
      width="460px"
      class="success-dialog"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div class="success-content">
        <div class="success-icon">
          <el-icon><Check /></el-icon>
        </div>
        <h3 class="success-title">邀请家人</h3>
        <p class="success-desc">你可以再将最多 5 人添加到你的家庭。</p>
        
        <div class="success-options">
          <button class="option-button" @click="handleInvite">
            <div class="option-icon invite-icon">
              <el-icon><Plus /></el-icon>
            </div>
            <div class="option-text">
              <div class="option-title">邀请他人</div>
              <div class="option-desc">邀请家人加入你的家庭</div>
            </div>
          </button>
          
          <button class="option-button" @click="handleCreateChild">
            <div class="option-icon child-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="option-text">
              <div class="option-title">创建儿童账户</div>
              <div class="option-desc">家长或法定监护人可为 13 周岁及以下的儿童创建儿童账户</div>
            </div>
          </button>
        </div>

        <div class="success-footer">
          <button class="success-done" @click="handleDone">完成</button>
        </div>
      </div>
    </el-dialog>

    <!-- 添加邀请成员对话框 -->
    <el-dialog
      v-model="showInviteDialog"
      :show-close="false"
      width="460px"
      class="invite-dialog apple-style"
      :close-on-click-modal="false"
    >
      <div class="invite-dialog-content">
        <div class="dialog-header">
          <h3 class="dialog-title">邀请成员</h3>
          <p class="dialog-subtitle">输入成员的账号信息以发送邀请</p>
        </div>

        <div class="dialog-form">
          <el-form
            ref="inviteFormRef"
            :model="inviteForm"
            :rules="inviteFormRules"
            class="invite-form"
          >
            <el-form-item prop="username">
              <el-input 
                v-model="inviteForm.username" 
                placeholder="用户名"
                class="apple-input"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input 
                v-model="inviteForm.password" 
                type="password" 
                placeholder="密码"
                class="apple-input"
              />
            </el-form-item>
          </el-form>
          
          <el-button 
            type="primary" 
            @click="handleInviteSubmit" 
            class="submit-button"
            :disabled="!inviteForm.username || !inviteForm.password"
          >
            完成
          </el-button>
        </div>
      </div>
    </el-dialog>


    <!-- 创建儿童账户对话框 - 第一步 -->
    <el-dialog
      v-model="showCreateChildStep1"
      width="460px"
      class="apple-style-dialog"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div class="dialog-header">
        <button class="apple-button-text" @click="showCreateChildStep1 = false">取消</button>
      </div>
      <div class="invite-content">
        <h2 class="apple-title">创建儿童账户</h2>
        <p class="apple-desc">为您的孩子创建一个账户</p>
        <el-form :model="childAccountDTO" :rules="step1Rules" ref="step1FormRef">
          <el-form-item prop="username">
            <el-input v-model="childAccountDTO.username" placeholder="用户名" class="apple-style-input">
              <template #prefix>
                <el-icon class="apple-input-icon">
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="childAccountDTO.password" type="password" placeholder="密码" show-password
              class="apple-style-input">
              <template #prefix>
                <el-icon class="apple-input-icon">
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="rePassword">
            <el-input v-model="childAccountDTO.rePassword" type="password" placeholder="确认密码" show-password
              class="apple-style-input">
              <template #prefix>
                <el-icon class="apple-input-icon">
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button class="apple-button-primary" @click="handleChildStep1">
          继续
        </el-button>
      </div>
    </el-dialog>

    <!-- 创建儿童账户对话框 - 第二步 -->
    <el-dialog
      v-model="showCreateChildStep2"
      width="460px"
      class="apple-style-dialog"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div class="dialog-header">
        <button class="apple-button-text" @click="showCreateChildStep2 = false">返回</button>
      </div>
      <div class="invite-content">
        <h2 class="apple-title">完善儿童信息</h2>
        <p class="apple-desc">请填写儿童的基本信息</p>
        <el-form :model="childAccountDTO" :rules="step2Rules" ref="step2FormRef">
          <el-form-item prop="fullName">
            <el-input v-model="childAccountDTO.fullName" placeholder="姓名" class="apple-style-input">
              <template #prefix>
                <el-icon class="apple-input-icon">
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="sex">
            <el-select v-model="childAccountDTO.sex" placeholder="性别" class="apple-style-input">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item prop="age">
            <el-input-number v-model="childAccountDTO.age" :min="1" :max="14" placeholder="年龄" class="apple-style-input" />
          </el-form-item>
          <el-form-item prop="height">
            <el-input-number v-model="childAccountDTO.height" :min="0" :precision="1" :step="0.1" placeholder="身高(cm)" class="apple-style-input" />
          </el-form-item>
          <el-form-item prop="weight">
            <el-input-number v-model="childAccountDTO.weight" :min="0" :precision="1" :step="0.1" placeholder="体重(kg)" class="apple-style-input" />
          </el-form-item>
        </el-form>
        <el-button class="apple-button-primary" @click="handleChildStep2">
          完成
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { createFamilyService } from '@/api/family'
import { UserRegisterService } from '@/api/user'
import { createChildAccountService } from '@/api/family'
import { 
  ArrowRight,
  Compass,
  DataAnalysis,
  Monitor,
  MagicStick,
  Food,
  Document,
  Share,
  Plus,
  Check
} from '@element-plus/icons-vue'
import router from '@/router'
import{getFamilyRoleService, inviteFamilyMemberService} from '@/api/family'
const showFamilyDialog = ref(false)
const userStore = useUserStore()
const showSuccessDialog = ref(false)
const showInviteDialog = ref(false)
const inviteForm = ref({
  username: '',
  password: ''
})
const inviteFormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
}
const inviteFormRef = ref(null)

// 处理创建家庭
const handleCreateFamily = async () => {
  showFamilyDialog.value = false
  // 调用创建家庭接口
  const res = await createFamilyService()
  if (res.code === 200) {
    // 获取家庭角色并更新 store
    const roleRes = await getFamilyRoleService()
    if (roleRes.code === 200) {
      userStore.userInfo.familyRole = roleRes.data
    }
    showSuccessDialog.value = true
  } else {
    ElMessage.error(res.message)
  }
}

// 处理邀请他人
const handleInvite = () => {
  showSuccessDialog.value = false
  showInviteDialog.value = true
}

// 处理邀请提交
const handleInviteSubmit = async () => {
  if (!inviteFormRef.value) return
  
  await inviteFormRef.value.validate(async (valid) => {
    if (valid) {
      const res = await inviteFamilyMemberService(inviteForm.value)
      
      if (res.code === 200) {
        ElMessage.success('加入家庭成功')
        showInviteDialog.value = false
        showSuccessDialog.value = true
      } else {
        inviteForm.value = { username: '', password: '' }
        ElMessage.error(res.message || '加入家庭失败')
      }
    }
  })
}

// 处理创建儿童账户
const handleCreateChild = () => {
  showCreateChildStep1.value = true
}

// 儿童账户创建相关
const showCreateChildStep1 = ref(false)
const showCreateChildStep2 = ref(null)
const step1FormRef = ref(null)
const step2FormRef = ref(null)

// 儿童账户 DTO
const childAccountDTO = ref({
    username: '',
    password: '',
    rePassword: '',
    fullName: '',
    sex: '',
    age: null,
    height: null,
    weight: null
})

// 第一步验证规则
const step1Rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value.length < 8 || value.length > 20) {
                    callback(new Error('用户名长度必须在8-20位之间'))
                } else if (!/^(?=.*[a-z])(?=.*\d)[a-z\d]{8,20}$/.test(value)) {
                    callback(new Error('用户名必须包含小写字母和数字'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    rePassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== childAccountDTO.value.password) {
                    callback(new Error('两次输入的密码不一致'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
}

// 第二步验证规则
const step2Rules = {
    fullName: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    sex: [
        { required: true, message: '请选择性别', trigger: 'change' }
    ],
    age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value < 1 || value > 14) {
                    callback(new Error('儿童账号年龄必须在14周岁以下'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ],
    height: [
        { required: true, message: '请输入身高', trigger: 'blur' }
    ],
    weight: [
        { required: true, message: '请输入体重', trigger: 'blur' }
    ]
}

// 处理第一步提交
const handleChildStep1 = async () => {
    if (!step1FormRef.value) return
    
    await step1FormRef.value.validate(async (valid) => {
        if (valid) {
            try {
                const res = await UserRegisterService(childAccountDTO.value)
                if (res.code === 200) {
                    showCreateChildStep1.value = false
                    showCreateChildStep2.value = true
                }
            } catch (error) {
              childAccountDTO.value = {
                    username: '',
                    password: '',
                    rePassword: ''
                  }
              ElMessage.error(res.message || '创建儿童账户失败')
            }
        }
    })
}

// 处理第二步提交
const handleChildStep2 = async () => {
    if (!step2FormRef.value) return
    
    await step2FormRef.value.validate(async (valid) => {
        if (valid) {
            try {
                const res = await createChildAccountService(childAccountDTO.value)
                if (res.code === 200) {
                    ElMessage.success('创建儿童账户成功')
                    showCreateChildStep2.value = false
                    showSuccessDialog.value = false
                    // 重置表单
                    childAccountDTO.value = {
                        username: '',
                        password: '',
                        rePassword: '',
                        fullName: '',
                        sex: '',
                        age: null,
                        height: null,
                        weight: null
                    }
                } else {
                    ElMessage.error(res.message || '创建儿童账户失败')
                }
            } catch (error) {
                ElMessage.error('创建儿童账户失败')
            }
        }
    })
}

// 处理完成按钮
const handleDone = () => {
  showSuccessDialog.value = false
}

const handleFamilyClick = () => {
  if (!userStore.userInfo) {
    router.push('/login')
  } else if (userStore.userInfo.familyRole) {
    router.push('/user/family')
  } else {
    showFamilyDialog.value = true
  }
}
</script>

<style scoped>
.index-container {
  width: 100%;
  overflow-x: hidden;
}

/* Hero Section Styles */
.hero-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url('/banner-background.jpg');
  background-size: cover;
  background-position: center;
  color: #1d1d1f;
}

/* 添加一个半透明覆盖层以确保文字可读性 */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

/* 添加波浪效果 */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4));
  transform: skewY(-3deg);
  transform-origin: bottom right;
  z-index: 1;
}

.hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-text {
  max-width: 800px;
  margin: 0 auto 100px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title {
  font-size: 64px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 24px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  background: linear-gradient(135deg, #1d1d1f 0%, #434343 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  font-size: 32px;
  color: #1d1d1f;
  margin: 0 0 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 18px;
  color: #86868b;
  line-height: 1.5;
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
  letter-spacing: -0.01em;
}

/* Experience Cards Styles */
.experience-cards-container {
  width: 100%;
  margin-top: 60px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease 0.3s forwards;
}

.experience-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.experience-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 30px;
  padding: 50px 40px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 
    0 4px 20px rgba(64, 158, 255, 0.05),
    0 8px 40px rgba(64, 158, 255, 0.08);
}

.experience-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 
    0 8px 30px rgba(64, 158, 255, 0.1),
    0 16px 60px rgba(64, 158, 255, 0.15);
  border-color: rgba(255, 255, 255, 1);
}

.card-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #f8f8f8, #ffffff);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.04);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-icon::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, #409EFF, #64B5F6);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

.experience-card:hover .card-icon {
  transform: scale(1.1);
  box-shadow: 
    0 8px 24px rgba(64, 158, 255, 0.15),
    0 16px 48px rgba(64, 158, 255, 0.1);
}

.experience-card:hover .card-icon::before {
  opacity: 1;
}

.card-icon :deep(svg) {
  width: 40px;
  height: 40px;
  color: #1d1d1f;
  transition: all 0.5s ease;
}

.experience-card:hover .card-icon :deep(svg) {
  color: #ffffff;
  transform: scale(1.1);
}

.experience-card h3 {
  font-size: 24px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.experience-card p {
  font-size: 16px;
  color: #86868b;
  line-height: 1.5;
  margin: 0;
  letter-spacing: -0.01em;
}

@media (max-width: 1200px) {
  .experience-cards-grid {
    gap: 30px;
    padding: 0 30px;
  }

  .hero-title {
    font-size: 56px;
  }

  .hero-description {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 80px 0;
  }

  .hero-content {
    padding: 0 24px;
  }

  .hero-title {
    font-size: 44px;
  }

  .hero-description {
    font-size: 24px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .experience-cards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 24px;
  }

  .experience-card {
    padding: 40px 30px;
  }

  .card-icon {
    width: 70px;
    height: 70px;
  }

  .card-icon :deep(svg) {
    width: 34px;
    height: 34px;
  }

  .experience-card h3 {
    font-size: 22px;
  }

  .experience-card p {
    font-size: 15px;
  }
}

/* Features Section Styles */
.features-section {
  padding: 80px 20px;
  background: white;
}

.section-title {
  text-align: center;
  font-size: 36px;
  color: #303133;
  margin-bottom: 60px;
}

.features-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}

.feature-card {
  padding: 32px;
  text-align: center;
  background: #f5f7fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 20px;
  color: #303133;
  margin: 0 0 16px;
}

.feature-card p {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin: 0;
}

/* Experience Section Styles */
.experience-section {
  padding: 80px 20px;
  background: #f5f7fa;
}

.experience-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.experience-card {
  padding: 40px;
  text-align: center;
  background: white;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.experience-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.experience-icon {
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 20px;
}

.experience-card h3 {
  font-size: 20px;
  color: #303133;
  margin: 0 0 16px;
}

.experience-card p {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin: 0;
}

.login-prompt {
  text-align: center;
  padding: 60px 20px;
}

.login-prompt h2 {
  font-size: 24px;
  color: #606266;
  margin: 0 0 32px;
}

.login-button {
  padding: 16px 32px;
  font-size: 18px;
  border-radius: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;
    text-align: center;
  }

  .hero-title {
    font-size: 36px;
  }

  .hero-description {
    font-size: 20px;
  }

  .features-grid,
  .experience-grid {
    grid-template-columns: 1fr;
  }
}

/* 家庭共享板块样式 */
.family-sharing-section {
  padding: 100px 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
  text-align: center;
}

.family-sharing-content {
  max-width: 800px;
  margin: 0 auto;
}

.sharing-description {
  font-size: 18px;
  color: #606266;
  margin: -20px 0 60px;
}

.avatar-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 60px auto;
  padding: 40px;
  max-width: 900px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.04),
    0 12px 48px rgba(64, 158, 255, 0.1);
}

.avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.avatar-item:hover {
  transform: translateY(-8px);
}

.avatar-wrapper {
  position: relative;
  padding: 6px;
  border-radius: 50%;
  background: white;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(64, 158, 255, 0.12);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.avatar-wrapper.active {
  background: linear-gradient(135deg, #409EFF, #64B5F6);
  padding: 8px;
}

.avatar-wrapper.active :deep(.el-avatar) {
  border: 4px solid white;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.avatar-status {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #67C23A, #95D475);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.2);
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.avatar-wrapper:hover .avatar-status {
  transform: scale(1.1);
}

.empty-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f7fa, #ffffff);
  border: 3px dashed #e4e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 24px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.avatar-wrapper.empty:hover .empty-avatar {
  border-color: #409EFF;
  color: #409EFF;
  background: linear-gradient(135deg, #f0f7ff, #ffffff);
  transform: rotate(15deg);
}

.avatar-name {
  font-size: 15px;
  color: #303133;
  font-weight: 600;
  transition: color 0.3s ease;
}

.avatar-item:hover .avatar-name {
  color: #409EFF;
}

.avatar-connect-line {
  position: absolute;
  right: -40px;
  top: 50%;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #e4e7eb 0%, #409EFF 100%);
  transform: translateY(-50%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.avatar-item:hover .avatar-connect-line {
  opacity: 1;
}

.avatar-item:last-child .avatar-connect-line {
  display: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .avatar-group {
    flex-wrap: wrap;
    gap: 30px;
    padding: 20px;
    margin: 30px 20px;
  }

  .avatar-connect-line {
    display: none;
  }

  .empty-avatar {
    width: 60px;
    height: 60px;
    font-size: 20px;
  }

  .avatar-name {
    font-size: 14px;
  }
}

.start-sharing-button {
  min-width: 200px;
  height: 48px;
  font-size: 16px;
  border-radius: 24px;
  background: v-bind('userStore.userInfo?.familyRole?.id === 1 ? "linear-gradient(135deg, #FF8C00, #FFA500)" : (userStore.userInfo?.familyRole?.id === 2 ? "linear-gradient(135deg, #409EFF, #64B5F6)" : "linear-gradient(135deg, #409EFF, #64B5F6)")');
  border: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 32px;
}

.start-sharing-button:hover {
  transform: translateY(-2px);
  box-shadow: v-bind('userStore.userInfo?.familyRole?.id === 1 ? "0 8px 24px rgba(255, 140, 0, 0.25)" : (userStore.userInfo?.familyRole?.id === 2 ? "0 8px 24px rgba(64, 158, 255, 0.25)" : "0 8px 24px rgba(64, 158, 255, 0.25)")');
}

.start-sharing-button .el-icon--right {
  margin-left: 4px;
  transition: transform 0.3s ease;
}

.start-sharing-button:hover .el-icon--right {
  transform: translateX(4px);
}

/* 家庭共享对话框样式 */
.family-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-width: 90%;
    margin: 0 auto;
  }
}

.family-dialog-content {
  padding: 20px 0;
}

.dialog-header {
  text-align: center;
  margin-bottom: 40px;
}

.dialog-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.dialog-title {
  font-size: 24px;
  color: #303133;
  margin: 0 0 12px;
}

.dialog-subtitle {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

.dialog-features {
  padding: 0 24px;
  margin-bottom: 40px;
}

.dialog-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: #ffffff;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #f0f0f0;
}

.dialog-feature-item:hover {
  background: #f8f9fa;
  border-color: #e4e7eb;
  transform: none;
  box-shadow: none;
}

.dialog-feature-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 共享健康数据图标 */
.dialog-feature-item:nth-child(1) .dialog-feature-icon {
  background: linear-gradient(135deg, #FC6C7B, #FE5196);
  box-shadow: 0 8px 20px rgba(252, 108, 123, 0.2);
}

/* 查看饮食推荐图标 */
.dialog-feature-item:nth-child(2) .dialog-feature-icon {
  background: linear-gradient(135deg, #32C5FF, #00A3FF);
  box-shadow: 0 8px 20px rgba(50, 197, 255, 0.2);
}

/* 设置家长控制图标 */
.dialog-feature-item:nth-child(3) .dialog-feature-icon {
  background: linear-gradient(135deg, #B17FFF, #935FE2);
  box-shadow: 0 8px 20px rgba(177, 127, 255, 0.2);
}

.dialog-feature-icon :deep(svg) {
  width: 26px;
  height: 26px;
  color: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.dialog-feature-item:hover .dialog-feature-icon {
  transform: translateY(-2px);
}

.dialog-feature-info h4 {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.dialog-feature-info p {
  font-size: 14px;
  color: #86868b;
  margin: 0;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.dialog-footer {
  padding: 20px 40px 0;
  border-top: 1px solid #ebeef5;
}

.dialog-note {
  font-size: 14px;
  color: #909399;
  margin: 0 0 20px;
  text-align: center;
}

.dialog-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.dialog-actions .cancel-button {
  min-width: 100px;
  height: 40px;
  font-size: 14px;
  border-radius: 20px;
  color: #606266;
  background: #f5f7fa;
  border: none;
}

.dialog-actions .cancel-button:hover {
  background: #e4e7eb;
  color: #303133;
}

.dialog-actions .continue-button {
  min-width: 160px;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 24px;
  background: linear-gradient(135deg, #409EFF, #64B5F6);
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dialog-actions .continue-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.25);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .family-dialog {
    :deep(.el-dialog) {
      width: 90% !important;
      max-width: 400px;
    }
  }

  .dialog-features {
    padding: 0 16px;
  }

  .dialog-footer {
    padding: 20px 20px 0;
  }

  .dialog-actions {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .dialog-actions .cancel-button,
  .dialog-actions .continue-button {
    width: 100%;
  }

  .dialog-feature-icon {
    width: 48px;
    height: 48px;
  }

  .dialog-feature-icon :deep(svg) {
    width: 22px;
    height: 22px;
  }
}

/* 添加创建成功对话框样式 */
.success-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-width: 90%;
    margin: 0 auto;
  }
}

.success-content {
  padding: 40px 30px;
  text-align: center;
}

.success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #409EFF, #64B5F6);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 40px;
}

.success-title {
  font-size: 24px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 12px;
}

.success-desc {
  font-size: 15px;
  color: #86868b;
  margin-bottom: 32px;
  line-height: 1.5;
}

.success-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-button {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f5f7fa;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  width: 100%;
}

.option-button:hover {
  background: #f0f7ff;
  transform: translateY(-2px);
}

.option-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: white;
  font-size: 20px;
}

.invite-icon {
  background: linear-gradient(135deg, #FC6C7B, #FE5196);
}

.child-icon {
  background: linear-gradient(135deg, #B17FFF, #935FE2);
}

.option-text {
  flex: 1;
}

.option-title {
  font-size: 16px;
  font-weight: 500;
  color: #1d1d1f;
  margin-bottom: 2px;
}

.option-desc {
  font-size: 13px;
  color: #86868b;
}

.success-footer {
  margin-top: 24px;
  text-align: center;
}

.success-done {
  color: #409EFF;
  font-size: 15px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.success-done:hover {
  background: #f0f7ff;
}

@media (max-width: 768px) {
  .success-content {
    padding: 30px 20px;
  }

  .success-icon {
    width: 64px;
    height: 64px;
    font-size: 32px;
  }

  .success-title {
    font-size: 20px;
  }

  .success-desc {
    font-size: 14px;
  }

  .option-button {
    padding: 12px;
  }

  .option-icon {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

/* 邀请对话框样式 */
.invite-dialog.apple-style {
  :deep(.el-dialog) {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-width: 90%;
    margin: 0 auto;
    background: #ffffff;
  }

  :deep(.el-dialog__header) {
    display: none;
  }

  :deep(.el-dialog__body) {
    padding: 0;
  }
}

.invite-dialog-content {
  padding: 0;
}

.dialog-header {
  padding: 32px 32px 24px;
  text-align: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), #ffffff);
  backdrop-filter: blur(20px);
}

.dialog-title {
  font-size: 24px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.dialog-subtitle {
  font-size: 15px;
  color: #86868b;
  margin: 0;
  line-height: 1.4;
}

.dialog-form {
  padding: 0 32px 32px;
}

.invite-form {
  margin-bottom: 24px;
}

.apple-input {
  :deep(.el-input__wrapper) {
    background: #f5f7fa;
    border: none;
    box-shadow: none !important;
    border-radius: 14px;
    padding: 4px 16px;
    height: 48px;
    transition: all 0.3s ease;
  }

  :deep(.el-input__wrapper:hover) {
    background: #eef1f6;
  }

  :deep(.el-input__wrapper.is-focus) {
    background: #eef1f6;
    box-shadow: inset 0 0 0 1px #0066CC !important;
  }

  :deep(.el-input__inner) {
    color: #1d1d1f;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    &::placeholder {
      color: #86868b;
    }
  }
}

.submit-button {
  width: 100%;
  height: 50px;
  font-size: 17px;
  font-weight: 500;
  border-radius: 14px;
  background: #007AFF;
  border: none;
  color: white;
  transition: all 0.3s ease;
  margin-top: 8px;

  &:hover:not(:disabled) {
    background: #0066CC;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
  }

  &:active:not(:disabled) {
    transform: translateY(0);
    background: #0055B3;
  }

  &:disabled {
    background: #d1d1d6;
    cursor: not-allowed;
    opacity: 0.8;
  }
}

@media (max-width: 768px) {
  .invite-dialog.apple-style {
    :deep(.el-dialog) {
      width: 90% !important;
      max-width: 400px;
    }
  }

  .dialog-header {
    padding: 24px 24px 20px;
  }

  .dialog-title {
    font-size: 20px;
  }

  .dialog-subtitle {
    font-size: 14px;
  }

  .dialog-form {
    padding: 0 24px 24px;
  }

  .apple-input {
    :deep(.el-input__wrapper) {
      height: 44px;
    }

    :deep(.el-input__inner) {
      height: 44px;
      line-height: 44px;
      font-size: 15px;
    }
  }

  .submit-button {
    height: 46px;
    font-size: 16px;
  }
}

/* 创建儿童账户对话框样式 */
.apple-style-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-width: 90%;
    margin: 0 auto;
  }

  .dialog-header {
    position: relative;
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }

  .apple-button-text {
    color: #007AFF;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;

    &:hover {
      background-color: rgba(0, 122, 255, 0.1);
    }

    &:active {
      background-color: rgba(0, 122, 255, 0.2);
      transform: scale(0.98);
    }
  }

  .invite-content {
    padding: 32px 40px 40px;
  }

  .apple-title {
    font-size: 28px;
    font-weight: 600;
    color: #1D1D1F;
    margin: 0 0 12px;
    line-height: 1.2;
  }

  .apple-desc {
    font-size: 17px;
    color: #86868B;
    margin: 0 0 32px;
    line-height: 1.4;
  }
}

.apple-style-input {
  :deep(.el-input__wrapper) {
    background: #f5f7fa;
    border: none;
    box-shadow: none !important;
    border-radius: 14px;
    padding: 4px 16px;
    height: 48px;
    transition: all 0.3s ease;
  }

  :deep(.el-input__wrapper:hover) {
    background: #eef1f6;
  }

  :deep(.el-input__wrapper.is-focus) {
    background: #eef1f6;
    box-shadow: inset 0 0 0 1px #0066CC !important;
  }

  :deep(.el-input__inner) {
    color: #1d1d1f;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    &::placeholder {
      color: #86868b;
    }
  }
}

.apple-button-primary {
  width: 100%;
  height: 50px;
  font-size: 17px;
  font-weight: 500;
  border-radius: 14px;
  background: linear-gradient(135deg, #409EFF, #64B5F6);
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.apple-button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.apple-input-icon {
  width: 20px;
  height: 20px;
  color: #86868b;
}
</style>
